<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文献资源管理系统-动态时间加载示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body >
    <div id="container" style="height: 600px"></div>


<!-- ./wrapper -->
<script src="lib/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script src="lib/walden.js"></script>

<script src="lib/mm.echarts.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
  var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            function randomData() {
                now = new Date(+now + 1000);
                value = value + Math.random() * 21 - 10;
                return {
                    name: now.toString(),
                    value: [
                        now,
                        Math.round(value)
                    ]
                }
            }
            var data = [];
            var now = new Date();
            var value = Math.random() * 1000;
            option = {
                title: {
                    text: '动态时间'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data,
                    itemStyle : {  
                    normal : {  
                        color:'	#00CCFF',  
                        lineStyle:{  
                            color:'	#00CCFF',
                        },
                    }  
                }, 
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                },
                }]
            };
            setInterval(function () {
                    //data.shift();
                    data.push(randomData());
                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }, 1000);

            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }

</script>

</body>
</html>